import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';
import {  Flex,WingBlank,Steps, WhiteSpace,Icon } from 'antd-mobile';

import MyScroll from '../../components/MyScroll/MyScroll';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyListView from '../../components/MyListView/MyListView';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import wuliuLogo from '../../assets/svg/wuliuLogo.svg';
import wuliuLogo2 from '../../assets/svg/wuliuLogo2.svg';
import { orderTrack} from "./orderTrack.less"
const Step = Steps.Step;



class OrderTrack extends Component {
    constructor(props) {
        super(props);
        this.state={
            visible: false,
            model: 0,
        };
        this.AlloyTouch = null;
    }

    componentDidMount(){
        this.props.dispatch({type:"member/OrderTrackEFF",obj:{nu:this.props.match.params.data}})
    }



    render() {
        console.log(this.props)
        const {OrderTrack=[]}=this.props.member
        return (
            <div style={{height: "100%", backgroundColor: "#F7F7F7", position: 'relative'}} className={orderTrack}>
                <NavTopBar title="订单跟踪" dispatch={this.props.dispatch}/>
                <Flex style={{background:"#fff",fontSize:".3rem",color:"#999"}}>

                    <WingBlank style={{width:"100%"}}>
                        <WhiteSpace></WhiteSpace>
                        <Flex style={{width:"100%",margin:".1rem 0"}}>
                            <div style={{width:"25%"}}>支付方式 : </div>
                            <div style={{width:"50%",marginLeft:".3rem"}}>{OrderTrack.paymentName}</div>
                        </Flex>
                        <WhiteSpace></WhiteSpace>
                        <Flex style={{marginBottom:".1rem"}}>
                            <div style={{width:"25%"}}>承运人 : </div>
                            <div style={{width:"50%",marginLeft:".3rem"}}>{OrderTrack.carrier }</div>
                        </Flex>
                        <WhiteSpace></WhiteSpace>
                        <Flex style={{marginBottom:".1rem"}}>
                            <div style={{width:"25%"}}>承运人电话 : </div>
                            <div style={{width:"50%",marginLeft:".3rem",color:"#0AA6E8"}} ><a href={"tel:"+OrderTrack.carrierPhone }>{OrderTrack.carrierPhone  }</a></div>
                        </Flex>
                        <WhiteSpace></WhiteSpace>
                        <Flex>
                            <div style={{width:"25%"}}>运单编号 : </div>
                            <div style={{width:"50%",marginLeft:".3rem"}}>{OrderTrack.nu   }</div>
                        </Flex>
                        <WhiteSpace></WhiteSpace>
                    </WingBlank>

                </Flex>
                {/* <Flex style={{background:"#fff",marginTop:".3rem"}}> */}

                    <MyScroll style={{width: "100%", position: 'absolute', top: '3.6rem', bottom: '0rem', backgroundColor:  '#fff'}}>
                        <WingBlank style={{width:"94%", margin: '0 auto'}}>
                            <WhiteSpace></WhiteSpace>
                            <Steps size="small" current={1} >
                                {OrderTrack.list!==undefined&&OrderTrack.list.map((v,i)=>{
                                    return <Step title={i==0?<span style={{color:"#6BA820"}}>{v.context}</span>:v.context }  key={i} icon={i==0?<Icon type={wuliuLogo.id} style={{width:".3rem",height:".3rem"}}/>:<Icon type={wuliuLogo2.id} style={{width:".3rem",height:".3rem"}}/>} description={v.timeStr } />
                                })}
                            </Steps>
                            <WhiteSpace></WhiteSpace>
                        </WingBlank>
                    </MyScroll>
                {/* </Flex> */}

            </div>
        )
    }
}

export default connect(({ member }) => ({ member }))(OrderTrack);
